<template>
	<div class="screen_wrap echarts_box">
		<corner></corner>
		<div class="body">
			<title1 title="空气站点位统计"></title1>
			<div class="statistics_wrap">
				<div class="section section1">
					<e-chart :options="option1" style="height:100%"></e-chart>
				</div>
				<div class="section section2">
					<e-chart :options="option2" style="height:100%"></e-chart>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { getAirCityNum,getAirData} from "@/api/bigScreen/bigScreen";
	import corner from '../public/corner'
	import title1 from '../public/title1'
	export default {
		components: {
			corner,
			title1
		},
		data() {
			return {
				option1: null,
				option2: null,
				color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de','#00ffff', '#00cfff','#006ced','#ffe000','#ffa800','#ff5b00','#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed'],
				data:[],
				data2:[],
				xData:[],
				total:0
			}
		},
		mounted() {
			this.initData()		
		},
		methods: {
			initData(){
				getAirData(22).then(res=>{					
					res.data.data.forEach(item=>{
						this.xData.push(item.type)
						this.data2.push(Number(item.num))
					})					
					// 柱状图初始化
					this.init2()						
				})
				getAirCityNum(22).then(res=>{				
					let arr=res.data.data					
					for (var i = 0; i < arr.length; i++) {
						this.total+=arr[i].siteCount
					    this.data.push({
					        value: arr[i].siteCount,
					        name: arr[i].regionName,
					        itemStyle: {
					            normal: {
					                borderWidth: 3,
					                shadowBlur: 4,
					                borderColor:this.color[i],
					                shadowColor: this.color[i]
					            }
					        }
					    },
					    // 饼图间隔设置
					    {
					        value: 1,
					        name: '',
					        itemStyle: {
					            normal: {
					                label: {
					                    show: false
					                },
					                labelLine: {
					                    show: false
					                },
					                color: 'rgba(0, 0, 0, 0)',
					                borderColor: 'rgba(0, 0, 0, 0)',
					                borderWidth: 0
					            }
					        }
					    });
					}	
					// 饼图初始化
					this.init()
				})							
			},	
			
			init2() {
				this.option2 = {
				    title: {
				        text: '空气站类型分布',
				        left: 'center',
				        top: 20,
				        textStyle: {
				            color: '#ccc',
				            fontSize:'12'
				        }
				    },					
					tooltip: { //提示框组件
						trigger: 'axis',
						formatter: '{b}<br />{a0}: {c0}',
						axisPointer: {
							type: 'shadow',
							label: {
								backgroundColor: '#6a7985'
							}
						},
						textStyle: {
							color: '#fff',
							fontStyle: 'normal',
							fontFamily: '微软雅黑',
							fontSize: 12,
						}
					},
					grid: {
						left: '10%',
						right: '10%',
						bottom: '20%',
						top: '30%',
						//	padding:'0 0 10 0',
						containLabel: false,
					},

					xAxis: [{
						type: 'category',
						//	boundaryGap: true,//坐标轴两边留白
						data: this.xData,
						axisLabel: { //坐标轴刻度标签的相关设置。
							//		interval: 0,//设置为 1，表示『隔一个标签显示一个标签』
							//	margin:15,
							textStyle: {
								color: '#f3ffff',
								fontStyle: 'normal',
								fontFamily: '微软雅黑',
								fontSize: 12,
							}
						},
						axisTick: { //坐标轴刻度相关设置。
							show: false,
						},
						axisLine: { //坐标轴轴线相关设置
							lineStyle: {
								color: '#fff',
								opacity: 0.2
							}
						},
						splitLine: { //坐标轴在 grid 区域中的分隔线。
							show: false,
						}
					}],
					yAxis: [{
						type: 'value',
						splitNumber: 4,
						axisLabel: {
							textStyle: {
								color: '#f3ffff',
								fontStyle: 'normal',
								fontFamily: '微软雅黑',
								fontSize: 12,
							}
						},
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						splitLine: {
							lineStyle: {
								color: ['#ccc'],
								opacity: 0.6,
								type:'dashed'
							}
						}
					}],
					series: [{
							name: '企业数量',
							type: 'bar',
							data: this.data2,
							barWidth: 15,
							barGap: 0, //柱间距离
							itemStyle: {
								normal: {
									show: true,
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: '#5768EF'
									}, {
										offset: 1,
										color: '#5768EF'
									}]),
									barBorderRadius: 0,
									borderWidth: 0,
								}
							},
						}
					]
				}
			},
			init() {
				let that=this
				this.option1 = {
					color: this.color,					
				    title: {
				        text: '空气站区域分布',
				        left: 'center',
				        top: 20,
				        textStyle: {
				            color: '#ccc',
				            fontSize:'12'
				        }
				    },
				    
					tooltip: {
						show: true,
						formatter: function(params) {
							if(params.name){
								return params.marker+params.name+' '+params.value
							}
						}
					},		
					series: [{
						name: '',
						type: 'pie',
						clockWise: false,
						top: '15%',
						radius: [45, 35],
						hoverAnimation: false,
						itemStyle: {
							normal: {
								label: {
									show: true,
									// color: '#ddd',
									formatter: function(params) {
										var percent = 0;
										percent = ((params.value / that.total) * 100).toFixed(0);
										if(params.name !== '') {
											return params.name +' '+percent + '%';
										} else {
											return '';
										}
									},
								},
								labelLine: {
									length:15,
									length2: 10,
									show: true,
									color: '#00ffff'
								}
							}
						},
						data: this.data
					}]
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.screen_wrap {
		height: 100%;
		position: relative;
		border: 1px solid #12B8E8;
		* {
			box-sizing: border-box;
		}
	}
	
	.body {
		height: 100%;
		display: flex;
		flex-direction: column;
		.statistics_wrap {
			flex: 1;
			display: flex;
		}
		.section.section1 {
			flex: 1;
		}
		.section.section2{width: 48%;}
	}
</style>